<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="${ctxPath}/assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="${ctxPath}/assets/module/admin.css"/>
</head>
<body>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form toolbar">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <select id="sltKey">
                            <option value="">请选择搜索条件</option>
                            <option value="u.username">用户账号</option>
                            <option value="u.nick_name">用户名</option>
                            <option value="r.model">操作模块</option>
                            <option value="r.description">操作功能</option>
                            <option value="r.url">请求地址</option>
                            <option value="r.param">请求参数</option>
                        </select>
                    </div>
                    <div class="layui-inline">
                        <input id="edtSearch" class="layui-input" type="text" autocomplete="off" placeholder="输入关键字"/>
                    </div>
                    <div class="layui-inline">
                        <select id="edtUserType">
                            <option value="">请选择类型</option>
                            <option value="0">甲方账号</option>
                            <option value="1">乙方账号</option>
                        </select>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input id="edtDate" class="layui-input date-icon" type="text" autocomplete="off"
                                   placeholder="请选择操作日期范围"/>
                        </div>
                    </div>

                    <div class="layui-inline">
                        <button id="btnSearch" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button>
                    </div>
                </div>
            </div>
            <!-- 数据表格 -->
            <table id="operRecordTable" lay-filter="operRecordTable"></table>
        </div>
    </div>
</div>
<!-- js部分 -->
<script type="text/javascript" src="${ctxPath}/assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="${ctxPath}/assets/js/common.js"></script>
<script>
    layui.use(['layer', 'form', 'table', 'tableX', 'util', 'laydate', 'admin'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var tableX = layui.tableX;
        var util = layui.util;
        var laydate = layui.laydate;
        var admin = layui.admin;

        /* 渲染表格 */
        var insTb = tableX.render({
            elem: '#operRecordTable',
            url: 'operRecord/list',
            page: true,
            height: 'full-100',
            cellMinWidth: 120,
            cols: [[
                {type: 'numbers'},
                {field: 'username', title: '账号', width: 160, align: 'center', templet:function (d) {
                        var strs = [
                            '<span class="layui-badge layui-badge-blue">甲方</span>',
                            '<span class="layui-badge layui-badge-gray" >乙方</span>'
                        ];
                        return d.username + " " + strs[d.userType] || '';
                    }},
                {field: 'nickName', title: '用户名', width: 120, align: 'center'},
                {field: 'model', title: '操作模块', width: 120, align: 'center'},
                {field: 'description', title: '操作功能', minWidth: 230},
                {field: 'url', title: '请求地址', minWidth: 260 ,templet:function (d) {
                        var requestMethod = d.requestMethod;
                        if (d.requestMethod == 'POST') {
                            requestMethod = "<span style='color: #eb5648; font-family:Courier New; font-weight: bold;'>[" + d.requestMethod + "]</span>";
                        } else {
                            requestMethod = "<span style='color: #57b382; font-family:Courier New; font-weight: bold;'>[" + d.requestMethod + "]</span>";
                        }
                        return requestMethod + " " + d.url;
                    }},
                {field: 'ip', title: '操作IP', width: 150, align: 'center'},
                /*{
                    field: 'userType', title: '类型', templet: function (d) {
                        var strs = [
                            '<span class="layui-badge layui-badge-blue">甲方</span>',
                            '<span class="layui-badge layui-badge-gray" >乙方</span>'
                        ];
                        return strs[d.userType] || '';
                    }, align: 'center', width: 80
                },*/
                {
                    field: 'state', title: '状态', templet: function (d) {
                        var strs = [
                            '<span class="layui-badge layui-badge-green">正常</span>',
                            '<span class="layui-badge layui-badge-red" >异常</span>'
                        ];
                        return strs[d.state] || '';
                    }, align: 'center', width: 80
                },
                {
                    field: 'spendTime', title: '耗时(/ms)', width: 100, align: 'center',
                    templet: '<p>{{d.spendTime}}</p>'
                },
                {
                    field: 'createTime', title: '操作时间', align: 'center', width: 200, templet: function (d) {
                        return util.toDateString(d.createTime);
                    }
                },
                {
                    title: '操作', align: 'center', width: 70, fixed: 'right',
                    toolbar: '<p><a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="info">详情</a></p>'
                }
            ]]
        });

        /* 时间范围 */
        laydate.render({
            elem: '#edtDate',
            type: 'date',
            range: true,
            theme: 'molv'
        });

        // 搜索按钮点击事件
        $('#btnSearch').click(function () {
            var key = $('#sltKey').val();
            var value = $('#edtSearch').val();
            var userType = $('#edtUserType').val();
            if (value && !key) {
                layer.msg('请选择搜索条件', {icon: 2});
            }
            var searchDate = $('#edtDate').val().split(' - ');
            insTb.reload({
                where: {
                    startDate: searchDate[0],
                    endDate: searchDate[1],
                    searchKey: key,
                    searchValue: value,
                    userType: userType,
                }
            });
        });

        /* 表格工具条点击事件 */
        table.on('tool(operRecordTable)', function (obj) {
            if ('info' === obj.event) { // 详情
                admin.open({
                    title: '详情',
                    type: 2,
                    shade: 0,
                    maxmin: true,
                    resize: true,
                    area: ['1000px', '580px'],
                    content: "operRecord/view?id=" + obj.data.id
                });
            }
        });


    });
</script>
</body>
</html>